<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>涛哥--网易云音乐播放器</title>
    <style type="text/css">
        /*公共样式*/
        *{margin:0px;padding:0px;}
        html,body{width:100%;height:100%;}

        /*使用矢量图标，定义字体*/
        @font-face {
            font-family: 'iconfont';
            src: url('./font/iconfont.eot');
            src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
                url('./font/iconfont.woff2') format('woff2'),
                url('./font/iconfont.woff') format('woff'),
                url('./font/iconfont.ttf') format('truetype'),
                url('./font/iconfont.svg#iconfont') format('svg');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /*播放器最底部背景图片层，做了模糊滤镜处理*/
        #back_box{width:100%;height:100%;background:url(./data/1.jpg) no-repeat center center;filter:blur(10px);}

        /*播放器第二层主体盒子，半透明黑色背景颜色，里面包含所有播放器组件*/
        #music_box{
            position:absolute; /*绝对定位*/
            top:0px;left:0px;
            width:100%;height:100%;
            background-color: rgba(0,0,0,0.5);
            display:flex; /**/ 
            flex-direction:column;
            justify-content:space-between;
        }

        /*播放器主体布局块：头部标题、CD碟片、歌词容器、时间进度条、播放按钮控件容器*/
        .header_row {width:100%;height:6%;display:flex;justify-content:space-between;align-items:center;}
        .cd_row {width:100%; height:55%;border-top:1px solid #999;overflow:hidden;position:relative;}
        .lyric_row {width:100%; height:20%;display:flex;flex-direction:column;align-items:center;}
        .time_row {width:100%; height:6%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
        .btn_row {width:100%; height:12%;display:flex;justify-content:space-around;align-items:center;}

        /*播放器头部标题*/
        #music_title{font-size:20px;font-weight:400;color: #fff;}
        .header_row span.iconfont{font-size:30px;color: #fff;margin-left:10px;margin-right:10px;}
        
        /*CD播放器样式*/
        #cd_img{margin:10% auto;width:80%;height:auto;background:url(./data/1.jpg) no-repeat center center;background-size:65% auto;}
        #cd_img img{display:block;width:100%;height:auto;margin:0px auto;border-radius:50%;}
        /*CD碟片转圈动画效果*/
        .rainbow{animation:20s rainbow linear infinite;}
        @keyframes rainbow{0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
        /*cd碟片上的棍*/
        #needle{width:20%;height:auto;position:absolute;top:0px;left:46%;}
        
        /*歌词展示样式*/
        #music_lyric{width:100%;height:100px;padding-top:10px;}
        #music_lyric span{width: 100%;height:40px;text-align: center;font-size: 14px;font-weight: 400;display: block;}
        .lyric_prev,.lyric_next{color: #d1d1d1;}
        #music_lyric .lyric_now{color:#33d8ea;font-size:16px;}

        /*播放时间展示样式*/
        .time_box{display:flex;justify-content:space-between;font-size:13px;color: #fff;font-weight:400;width:100%;}
        #now_time{margin-left:5px;}
        #total_time{margin-right:5px;}
        /*播放进度条效果*/
        .time_axis{width:100%;}
        .slideway{width:100%;height:4px;background:#000;position:relative;}
        #ahead_head{width:12px;height:12px;background: #fff;border-radius: 50%;position: absolute;top: -4px;}
	    #progress_bar{position:absolute;top:0;left:0;height:4px;background-image: -webkit-linear-gradient(left,red, #09f);display:block;}

        /*播放按钮控件样式*/
        #volume_toggle{font-size:36px;color:#fff;}
		#btn_prev{font-size:40px;color:#fff;}
        #btn_play{font-size:70px;color:#fff;}
		#btn_next{font-size:40px;color:#fff;}
		#loop_type{font-size:40px;color:#fff;}
    </style>
</head>
<body>
    <!-- 页面的背景层 -->
    <div id="back_box"></div>

    <!-- 音乐播放器容器盒子 -->
    <div id="music_box">
        <!--播放器头部标题-->
        <audio src="" id="audio_box" data-id=""></audio>
        <div class="header_row">
            <span class="iconfont">&#xe6e2;</span>
            <span id="music_title">你笑起来真好看</span>
            <span class="iconfont">&#xe69d;</span>
        </div>

        <!--模拟cd播放机-->
        <div class="cd_row">
            <div id="cd_img" class="">
                <img src="images/disc-ip6.png"/>
            </div>
            <img id="needle" class="run" src="./images/needle-ip6.png"/>
        </div>

        <!--歌词区域-->
        <div class="lyric_row" id="music_lyric">
            <span class="lyric_prev">歌手：李昕融</span>
            <span class="lyric_now">你笑起来真好看</span>
            <span class="lyric_next">像春天的花一样</span>
        </div>

        <!--显示播放时间、进度条-->
        <div class="time_row">
            <!--音频时间-->
            <div class="time_box">
                <span id="now_time">00:00</span>
                <span id="total_time">00:00</span>
            </div>
            <!--音频播放进度条-->
            <div class="time_axis">
                <div class="slideway">
                    <span id="progress_bar"></span>
                    <div id="ahead_head"></div>
                </div>
            </div>
        </div>

        <!--按钮（暂停/播放、上一曲、下一曲、声音开关、音量调节、循环播放）-->
        <div class="btn_row">
            <span id="volume_toggle" class="iconfont">&#xe6e4;</span>
            <span id="btn_prev" class="iconfont" >&#xe6a5;</span>
            <span id="btn_play" class="iconfont" >&#xe6a8;</span>
            <span id="btn_next" class="iconfont" >&#xe69f;</span>
            <span id="loop_type" class="iconfont" item="1">&#xe69e;</span>
        </div>
    </div>
</body>
<script type="text/javascript">

	////// 配置启用 /////////////////////////////////////////////////////////

		var autoPlay = 1;		// 初始化自动播放状态(true/false或者1/0)
		//var loopFlag = 1; 		// 循环播放模式（0:单曲循环/1:列表循环）
		//var volumeOn = 1;		// 是否静音 (0:静音/1:有声)
		//var volumeVal = 5;		// 初始音量 （范围1~10）
		var mp3Url = './data2.json'; // 获取静态json数据URL
		//var mp3Url = 'http://127.0.0.1/audio/php/data.php'; // 动态获取json数据URL
		window.onload = function(){
			audioFun(); //载入音频
		}

	/////////////////////////////////////////////////////////////////////////

	/**************
	 * 启动音频方法 *
	 *************/
	function audioFun(){
		var _backDom = document.getElementById("back_box")			// 背景图DOM	
		var _audioDom = document.getElementById("audio_box"); 		// 音频DOM
		var _cdImgDom = document.getElementById("cd_img");			// CD模拟DOM
		var _musicNameDom = document.getElementById("music_title")	// 标题DOM
		var _progress = document.getElementById("progress_bar");	// 进度条DOM
		var _aheadDom = document.getElementById("ahead_head"); 		// 播放进度头DOM
		var _totalTime = document.getElementById("total_time");		// 音频总时间DOM
		var _nowTime = document.getElementById("now_time");			// 音频当前播放时间DOM
		var _prevDom = document.getElementById('btn_prev');			// 上一曲DOM
		var _nextDom = document.getElementById('btn_next');			// 下一曲DOM
		var _volumeSet = document.getElementById('volume_toggle');	// 声音/静音DOM
		var _loopDom = document.getElementById('loop_type');		// 循环模式DOM
		var _playDom = document.getElementById('btn_play');			// 播放/暂停DOM
		var _lyricPrev = document.getElementsByClassName("lyric_prev")[0];	// 歌词上一句DOM
		var _lyricNow = document.getElementsByClassName("lyric_now")[0];	// 歌词当前句DOM
		var _lyricNext = document.getElementsByClassName("lyric_next")[0];	// 歌词下一句DOM
		var _slideway = document.getElementsByClassName("slideway")[0];		// 播放条DOM
		var slidewayWidth = _slideway.clientWidth||_slideway.offsetWidth;	// 播放条总长度DOM
		var start_X = start_Y = end_X = end_Y = 0; 					//快进快退拖动鼠标光标初始值
		var lyricArr = [];				// 歌词初始数组
		//_volumeDom.value = volumeVal; 	// 初始音量值
		//loopFun(loopFlag); 				// 初始循环播放模式
		//volumeFun(volumeOn); 			// 初始声音模式
		fileInfo(1,''); 				// 初始化载入

		/**
		 * 获取音频信息
		 */
		function fileInfo(songId,flag){
			if(!songId){
				return false;
			}
			// 初始播放循环方式

			//请求数据
			var param = 'id='+songId+'&flag='+flag;
			ajax('GET', mp3Url, param, function(data){
				
				////////////静态获取json文件 <<< ////////////////////////////////////////
				if(songId){
					var data = JSON.parse(data);    // json字符串转json对象
					var leng = data.length;
					var dataJson = {};
					if(flag == 'N'){
						dataJson = songId >= leng ? data[0] : data[songId];
					}else if(flag == 'P'){
						dataJson = songId-2 <= 0 ? data[0] : data[songId-2];
					}else{
						dataJson = songId-1 <= 0 ? data[0] : data[songId-1];
					}
					_backDom.style.backgroundImage = "url('"+dataJson.backimg+"')";
					_musicNameDom.innerText = dataJson.title;
					_cdImgDom.style.backgroundImage = "url('"+dataJson.img+"')";
					_audioDom.setAttribute('src', dataJson.src);
					_audioDom.setAttribute('data-id', dataJson.id);
					lyricArr = dataJson.lyric;
					// 音频操作
					if(autoPlay){
						audioFun();
					}
				}else{
					console('Errer: '+data);
				}
			});
        }

        // 启动播放方法
		function plays(){
			let playPromise = _audioDom.play();
			if (playPromise !== undefined) {
			  playPromise.then(() => {
				_audioDom.play()
			  }).catch(() => {})
            }
            
            // 更新样式
			if(!_audioDom.paused){
				_playDom.innerHTML="&#xe6a2;";
				_cdImgDom.classList.add('rainbow');
				document.getElementById("needle").classList.add('run');
			}
		}
        
        /**
		 * 为【声音/静音】切换按钮绑定事件处理方法
		 */
         _volumeSet.onclick = function(){
            //判断当前audio音频对象是否关闭声音
			if(_audioDom.muted){
				_volumeSet.innerHTML="&#xe6e4;"; //有声音图标
                _audioDom.muted = false; //开启声音
			}else{
				_volumeSet.innerHTML="&#xe6e1;"; //静音图标
                _audioDom.muted = true;  //静音
			}
		}

		/**
		 * 为【播放/暂停】按钮绑定事件处理方法
		 */
         _playDom.onclick = function(){
            //获取并判断音频audio对象的播放状态是否是暂停状态
			if(_audioDom.paused){
                plays(); //执行播放
			}else{
                _audioDom.pause(); //执行暂停
                _playDom.innerHTML="&#xe6a8;"; //修改成播放按钮
				_cdImgDom.classList.remove('rainbow'); //CD碟片停止旋转
				//document.getElementById("needle").classList.remove('run');
			}
		}

		/**
		 * 点击上一首
		 */
		_prevDom.onclick = function(){
			var prevSong = _audioDom.getAttribute('data-id');
			fileInfo(prevSong,'P');
		}

		/**
		 * 点击下一首
		 */
		_nextDom.onclick = function(){
			var nextSong = _audioDom.getAttribute('data-id');
			fileInfo(nextSong,'N');
		}

		/**
		 * 播放模式【单曲循环/列表循环】按钮事件切换处理函数
		 */
		_loopDom.onclick = function(){
			var loopFlag = _loopDom.getAttribute('item');
			if(loopFlag == '0'){
				_loopDom.setAttribute('item', '1');
				_loopDom.innerHTML="&#xe69e;";
			}else{
				_loopDom.setAttribute('item', '0');
				_loopDom.innerHTML="&#xe6a7;";
			}
		}

		/**
		 * 音频运行设置 Function
		 */
		function audioFun(){
			//_audioDom.play();
			//plays();
		
			/** 当在加载时获取audio的总时间 **/
			_audioDom.onprogress = function(){
				_totalTime.innerHTML = timeFormat(_audioDom.duration);
			};

			/** 当前播放时间发生改变的时候 **/
			_audioDom.ontimeupdate = function(){
				_totalTime.innerHTML = timeFormat(_audioDom.duration);	// 音频总时间;
				_nowTime.innerHTML = timeFormat(_audioDom.currentTime);	// 更新当前播放的时间;
				var now_long = _audioDom.currentTime/_audioDom.duration*slidewayWidth; // 当前时间播放的长度
				//var now_long = _audioDom.currentTime/43*slidewayWidth;
				_progress.style.width = now_long+'px';	   // 进度条长度
				_aheadDom.style.left = (now_long-10)+'px'; // 进度条头位置

				//遍历歌词
				for (var i = 0, l = lyricArr.length; i < l; i++) {
					if (_audioDom.currentTime > lyricArr[i][0]) {
						if(i>=1){
							_lyricPrev.innerHTML = lyricArr[i-1][1];
							_lyricNow.innerHTML = lyricArr[i][1];
							if(lyricArr.hasOwnProperty(i+1)){
								_lyricNext.innerHTML = lyricArr[i+1][1];
							}else {
								_lyricNext.innerHTML = '';
							}
						}else{
							_lyricPrev.innerHTML = '';
							_lyricNow.innerHTML = lyricArr[i][1];
							_lyricNext.innerHTML = lyricArr[i+1][1];
						}
					}
				}
				
			};

			/** 播放完毕后-执行最新播放模式 **/
			_audioDom.addEventListener('ended', function () {
				var loopFlag = _loopDom.getAttribute('item');
				if(loopFlag == '0'){
					var audioId = _audioDom.getAttribute('data-id');
					fileInfo(audioId,'');
				}else if(loopFlag == '1'){
					var nextSong = _audioDom.getAttribute('data-id');
					fileInfo(nextSong,'N'); // 下一曲
				}
            }, false);
            
            addListenTouch(); // 监听手动拉动播放进度条
		}

		/**
		 * 手动拉拽进度条
		 */
		function addListenTouch(){
			_aheadDom.addEventListener("touchstart", touchStart, false);
			_aheadDom.addEventListener("touchmove", touchMove, false);
			_aheadDom.addEventListener("touchend", touchEnd, false);
		}
		//触摸时
		function touchStart(e){
			e.preventDefault();
			_audioDom.pause();
			var touch = e.touches[0];
			start_X = touch.pageX; // 初始X位置
		}
		//滑动时
		function touchMove(e){
			//e.preventDefault();
			var touch = e.touches[0];
			var x_long = touch.pageX-start_X; // 滑动的距离
			var now_long = _audioDom.currentTime/_audioDom.duration*slidewayWidth;	// 已播放进度条长度
			var widthBar = now_long + x_long; // 拖拽后进度条总长度
			_progress.style.width = widthBar+'px'; 	// 更新进度条长度
			if(widthBar < slidewayWidth){
				_aheadDom.style.left = (widthBar-10)+'px'; 	// 按钮位置
			}
			var now_times = widthBar/slidewayWidth*_audioDom.duration; // 滑动后时间
			_nowTime.innerHTML = timeFormat(now_times);
		}
		//手指离开屏幕
		function touchEnd(e){
			e.preventDefault(); // 取消事件的默认动作
			var widthBar = _progress.clientWidth||progress_bar.offsetWidth;
			var now_times = ((widthBar-10)/(slidewayWidth-20)*_audioDom.duration);
			_audioDom.currentTime = now_times;
			plays();
		}

		/**
		 * 时间格式转换- 00:00
		 */
		var timeFormat = function(seconds){
			var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
			var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
			return m+":"+s;
		};

		/**
		 * 自定义Ajax 请求方法
		 */
		function ajax(method, url, data, fnsuccess) {
			var xhr;
			// 1创建对象，兼容问题
			if(window.XMLHttpRequest) {
				//在高版本的浏览器 IE7+
				xhr = new XMLHttpRequest();
			} else {
				//IE5 IE6
				xhr = new ActiveXObject();
			}
			// 2发送请求
			if(method == 'GET' && data) {
				url = url + '?' + data;
			}
			xhr.open(method, url, true);
			// 3参数
			if(method == 'GET') {
				xhr.send(null);
			} else {
				//创建头文件信息
				xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
				xhr.send(data);
			}
			// 4接受后台传过来的数据，解析 dom操作
			xhr.onreadystatechange = function() {
				if(xhr.readyState == 4) { 	//响应过程状态信息
					if(xhr.status == 200) { //status:状态码
						fnsuccess && fnsuccess(xhr.responseText);
					} else {
						console.log(xhr); //发生错误时，返回该状态码
					}
				}
			}
		}

	}
</script>
</html>